﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="7.aspx.cs" Inherits="BaseWeb.拖拽研究._6" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>拖动范围</title>
    <%--
    除了方向之外，还可以通过containment参数约束拖动的范围。
    该参数接受Selector, Element, String, Array类型。
    其中String可以为parent,document,window，Array是指定一个矩形区域（regin）的四元数组：[x1,y1,x2,y2]。
    下面的例子分别指定了parent和regin作为范围限制：
    --%>

    <script src="../../js/jquery-1.7.min.js" type="text/javascript"></script>

    <script src="../../js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>

    <script>
        $(function()
        {
            $("#draggable1").draggable({
                containment: "parent"
            });
            $("#draggable2").draggable({
                containment: [20, 20, 300, 200]
            });
        });</script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="container" style="background-color: gray; height: 500px">
        <div id="draggable1" style="background-color: red; height: 60px; width: 60px">
            <p>
                in parent</p>
        </div>
        <div id="draggable2" style="background-color: green; height: 60px; width: 60px">
            <p>
                in regin</p>
        </div>
    </div>
    </form>
</body>
</html>
